<style scoped lang="less">
.area-blk {
  padding: 0;
}
.setting-nav-wrap {
  padding: 10px 0 0;
  .unit-tree {
    padding: 0 10px;
    overflow: auto;
  }
  .unit-search {
    padding: 0 10px;
  }
}
.setting-nav {
  .icon {
    width: 16px;
    vertical-align: center;
    opacity: 0.9;
  }
}
</style>

<style lang="less">
.unit-search {
  margin-bottom: 10px;
  .el-input__inner {
    background: #0c276c;
    border-color: #0c276c;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    &:hover {
      background: #0c276c;
      border-color: #0c276c;
    }
  }
  .el-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
</style>
<template>
  <div class="page-census page-setting">
    <el-container :style="{ height: mainH + 'px' }">
      <el-aside
        class="setting-nav-wrap"
        width="200px"
        v-if="siteInfos.userType == 1"
      >
        <div class="unit-tree">
          <UnitList
            :height="mainH - 110"
            @select="onUnitSelect"
            ref="unitList"
          ></UnitList>
          <!-- <el-tree
                        ref="unitTree"
                        :data="unitData"
                        node-key="id"
                        :props="defaultProps"
                        @node-click="handleUnitClick"
                        unselectable="on"
                        :expand-on-click-node="false"
                        :default-expanded-keys="defaultExpandedKeys"
                        :filter-node-method="filterUnitNode"
                        :indent="36"
                    >
                        <div
                            class="tree-node"
                            :class="{ active: activeUnitId == node.data.id }"
                            slot-scope="{ node, data }"
                        >
                            {{ data.name }}
                        </div>
                    </el-tree> -->
        </div>
      </el-aside>
      <el-main class="setting-main">
        <div class="crumbs">
          <router-link to="/">首页</router-link> /
          <span class="active">物联网设备管理</span>
        </div>
        <el-container :style="{ height: mainH - 40 + 'px' }">
          <el-aside class="area-blk" width="250px">
            <ul class="setting-nav">
              <router-link
                tag="li"
                :to="'/equipment?type=' + item.type"
                :class="{ active: type == item.type }"
                v-for="(item, index) in navList"
                :key="index"
              >
                <img class="icon" :src="item.icon" /> {{ item.name }}
              </router-link>
            </ul>
          </el-aside>
          <el-main class="census-main">
            <div class="opers flex v-c">
              <el-form :inline="true" class="filter-blk flex-1">
                <el-form-item label="设备编号">
                  <el-input
                    placeholder="请输入设备编号"
                    v-model.trim="filterForm.number"
                  ></el-input>
                </el-form-item>
                <el-form-item label="安装位置">
                  <el-input
                    placeholder="请输入安装位置"
                    v-model.trim="filterForm.position"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="searchAction">
                    <i class="iconfont icon-search"></i> 查询
                  </el-button>
                </el-form-item>
              </el-form>
              <div>
                <el-button
                  type="blue"
                  @click="showGroup"
                  :disabled="!$store.getters.hasEditPermission"
                  v-if="
                    hasPermission('017001') &&
                      activeUnit &&
                      activeUnit.id != 0 &&
                      type == 18
                  "
                >
                  <i class="iconfont icon-add"></i>
                  分组
                </el-button>
                <el-button
                  type="blue"
                  @click="newAction"
                  :class="{ 'is-disabled': !hasUnit }"
                  v-if="hasPermission('017001')"
                  :disabled="!$store.getters.hasEditPermission"
                >
                  <i class="iconfont icon-add"></i> 添加
                </el-button>
                <!-- <el-upload
                                    style="display: inline-block; margin: 0 10px;"
                                    :action="config.baseApi + '/uploadFile/deviceImport'"
                                    :limit="1"
                                    accept=".xlsx"
                                    :show-file-list="false"
                                    :on-success="importSuccess"
                                    :on-error="importError"
                                    :headers="{
                                        Authorization: 'Bearer ' + siteInfos.token,
                                    }"
                                    :disabled="!$store.getters.hasEditPermission || !hasUnit"
                                    v-if="hasPermission('017002')"
                                >
                                    <el-button
                                        type="blue"
                                        :disabled="!$store.getters.hasEditPermission"
                                        :class="{'is-disabled': !hasUnit}"
                                    >
                                        <i class="iconfont icon-import-folder"></i>
                                        导入
                                    </el-button>
                                </el-upload> -->
                <el-button
                  type="blue"
                  @click="importAction"
                  v-if="hasPermission('017002')"
                  :disabled="!$store.getters.hasEditPermission || !hasUnit"
                >
                  <i class="iconfont icon-import-folder"></i> 导入
                </el-button>
                <el-button
                  v-if="hasPermission('017003')"
                  type="blue"
                  @click="exportAction"
                  :disabled="!$store.getters.hasEditPermission"
                >
                  <i class="iconfont icon-export-folder"></i> 导出
                </el-button>
                <el-button
                  v-if="hasPermission('017004')"
                  type="blue"
                  @click="downloadAction"
                  :disabled="!$store.getters.hasEditPermission"
                >
                  <i class="iconfont icon-download"></i> 模板下载
                </el-button>
              </div>
            </div>
            <el-table
              ref="tableRef"
              :data="dataList"
              style="width: 100%"
              v-loading="loading"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
                :index="indexMethod"
              ></el-table-column>
              <el-table-column
                prop="number"
                label="设备编号"
                width="200"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="设备名称"
                width="200"
              ></el-table-column>
              <el-table-column
                prop="deviceTypeName"
                label="设备类型"
                width="240"
              ></el-table-column>
              <el-table-column
                prop="position"
                label="安装位置"
              ></el-table-column>
              <el-table-column label="操作" width="330">
                <template slot-scope="scope">
                  <el-button
                    v-if="hasPermission('017005')"
                    type="primary"
                    @click="noticeAction(scope.row)"
                    :disabled="!$store.getters.hasEditPermission"
                    >通知</el-button
                  >
                  <el-button
                    v-if="hasPermission('017006')"
                    type="primary"
                    @click="editAction(scope.row)"
                    :class="{ 'is-disabled': !hasUnit }"
                    :disabled="!$store.getters.hasEditPermission"
                  >
                    编辑
                  </el-button>
                  <el-button
                    v-if="
                      hasPermission('017007') &&
                        (scope.row.deviceClassify == 1 ||
                          scope.row.deviceClassify == 2 ||
                          scope.row.deviceClassify == 22)
                    "
                    :disabled="!$store.getters.hasEditPermission"
                    type="primary"
                    @click="thresholdAction(scope.row)"
                  >
                    阈值
                  </el-button>
                  <el-button
                    v-if="hasPermission('017008')"
                    type="red"
                    @click="deleteAction(scope.row)"
                    :disabled="!$store.getters.hasEditPermission"
                    >删除</el-button
                  >
                  <el-dropdown>
                    <el-button
                      type="primary"
                      style="margin-left: 10px;"
                      :disabled="!accessControl"
                    >
                      更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu
                      class="tb-oper-dropdown-menu"
                      slot="dropdown"
                    >
                      <el-dropdown-item
                        v-if="
                          scope.row.deviceType == 22 && hasPermission('017009')
                        "
                      >
                        <el-button
                          type="primary"
                          @click="openIssueAction(scope.row)"
                          :disabled="!$store.getters.hasEditPermission"
                          >控制分合闸</el-button
                        >
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          scope.row.deviceClassify == 6 &&
                            scope.row.productId == 6003 &&
                            hasPermission('017010')
                        "
                      >
                        <el-button
                          type="primary"
                          @click="evidenceAction(scope.row)"
                          :disabled="!$store.getters.hasEditPermission"
                          >证据链下载</el-button
                        >
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          scope.row.deviceClassify == 3 &&
                            hasPermission('017011') &&
                            scope.row.deviceType !== '1001'
                        "
                      >
                        <el-button
                          type="primary"
                          @click="muteAction(scope.row)"
                          :disabled="!$store.getters.hasEditPermission"
                          >消音</el-button
                        >
                      </el-dropdown-item>
                      <el-dropdown-item v-if="scope.row.deviceClassify == 19">
                        <el-button
                          :disabled="!$store.getters.hasEditPermission"
                          type="primary"
                          @click="showSwitch(scope.row)"
                        >
                          开关列表
                        </el-button>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="scope.row.deviceType == '1001'">
                        <el-button
                          :disabled="
                            !$store.getters.hasEditPermission || !hasUnit
                          "
                          type="primary"
                          @click="showChildDevice(scope.row)"
                        >
                          子设备列表
                        </el-button>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          hasPermission('017008') &&
                            scope.row.deviceClassify == 11
                        "
                      >
                        <el-button
                          type="green"
                          :disabled="!$store.getters.hasEditPermission"
                          @click="setChannel(scope.row)"
                          >配置通道</el-button
                        >
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          scope.row.deviceClassify == 3 ||
                            scope.row.deviceClassify == 1 ||
                            scope.row.deviceClassify == 22
                        "
                      >
                        <el-button
                          type="green"
                          :class="{ 'is-disabled': !hasUnit }"
                          @click="bindMonitorAction(scope.row)"
                          :disabled="!$store.getters.hasEditPermission"
                        >
                          绑定监控
                        </el-button>
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          scope.row.deviceClassify == 1 &&
                            (scope.row.productId == '1001' ||
                              scope.row.productId == '1005')
                        "
                      >
                        <el-button
                          type="green"
                          @click="remoteControlAction(scope.row)"
                          :disabled="!$store.getters.hasEditPermission"
                          >远程控制</el-button
                        >
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          scope.row.productId == '5003' ||
                            scope.row.productId == '5004'
                        "
                      >
                        <el-button
                          key="affection"
                          type="primary"
                          @click="numberType(scope.row, 1)"
                          :disabled="!$store.getters.hasEditPermission"
                          >亲情号码</el-button
                        >
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="
                          scope.row.productId == '5003' ||
                            scope.row.productId == '5004'
                        "
                      >
                        <el-button
                          key="SOS"
                          type="primary"
                          @click="numberType(scope.row, 2)"
                          :disabled="!$store.getters.hasEditPermission"
                          >SOS号码</el-button
                        >
                      </el-dropdown-item>
                      <el-dropdown-item v-if="isFlowRate">
                        <el-button
                          key="affection"
                          type="primary"
                          :class="{ 'is-disabled': !hasUnit }"
                          :disabled="!$store.getters.hasEditPermission"
                          @click="flowRate(scope.row)"
                          >视频流量</el-button
                        >
                      </el-dropdown-item>
                      <!-- <el-dropdown-item>
                        <el-button type="primary" @click="getCode(scope.row)"
                          >生成二维码</el-button
                        >
                      </el-dropdown-item> -->
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-if="total > 0"
              class="text-right mt-20 mr-20"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, total, jumper"
              :total="total"
            >
            </el-pagination>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
    <!-- 添加/编辑 start -->
    <el-dialog
      v-if="newModalVisible"
      :title="newModalTitle"
      :visible.sync="newModalVisible"
      width="660px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <MonitorNew
        v-if="type == '6' || (+type > 10 && type != 18 && type != 19)"
        ref="newData"
        :type="type"
        :unit="activeUnit"
        :activeData="activeData"
        @success="submitSuccessAction"
        @fail="submitFailAction"
        @submitting="adding = true"
        @cancel="newModalVisible = false"
      >
      </MonitorNew>
      <New
        v-else
        ref="newData"
        :type="type"
        :unit="activeUnit"
        :activeData="activeData"
        @success="submitSuccessAction"
        @fail="submitFailAction"
        @submitting="adding = true"
        @cancel="newModalVisible = false"
      >
      </New>
      <div slot="footer">
        <el-button type="cancel" @click="newModalVisible = false"
          >取消</el-button
        >
        <el-button type="primary" :loading="adding" @click="submitAction"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加/编辑 end -->
    <!-- 阈值 start -->
    <el-dialog
      v-if="thresholdModalVisible"
      title="阈值"
      :visible.sync="thresholdModalVisible"
      width="660px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <Threshold
        ref="threshold"
        :number="activeNumber"
        @success="submitThresholdSuccess"
        @fail="saving = false"
      ></Threshold>
      <div slot="footer">
        <el-button type="cancel" @click="thresholdModalVisible = false"
          >取消</el-button
        >
        <el-button type="primary" :loading="saving" @click="submitThreshold"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 通知 start -->
    <el-dialog
      v-if="noticeModalVisible"
      title="通知"
      :visible.sync="noticeModalVisible"
      width="660px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <Notice
        ref="notice"
        :number="activeNumber"
        :deviceClassify="type"
      ></Notice>
      <setting-notice
        ref="Notice"
        :popType="false"
        :noticeorgId="noticeorgId"
        :noticeId="noticeId"
      ></setting-notice>
      <!-- <div slot="footer">
	    		<el-button type="cancel" @click="noticeModalVisible=false">取消</el-button>
		  		<el-button type="primary" :loading="saving" @click="submitNotice">保存</el-button>
		  	</div> -->
    </el-dialog>
    <!-- 证据链下载 start -->
    <el-dialog
      v-if="evidenceVisible"
      title="证据链列表"
      :visible.sync="evidenceVisible"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <evidence :number="activeNumber"></evidence>
    </el-dialog>
    <!-- 远程控制 分合闸 start -->
    <el-dialog
      class="remote-modal"
      v-if="issueModalVisible"
      title="远程控制 分合闸"
      :visible.sync="issueModalVisible"
      width="300px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <p>当前状态：{{ activeData.openingState == 1 ? "开" : "关" }}</p>
      <div class="flex-1 mt-10" v-if="activeData.openingState == 1">
        <el-button class="full" type="red" @click="openIssue">关闭</el-button>
      </div>
      <div class="flex-1 mt-10" v-else>
        <el-button class="full" type="primary" @click="openIssue"
          >打开</el-button
        >
      </div>
    </el-dialog>
    <!-- 远程控制 分合闸 end -->
    <!-- 远程抄表分组 start -->
    <group
      v-if="groupModalVisible"
      :visible.sync="groupModalVisible"
      :winH="winH"
      :activeUnit="activeUnit"
      :deviceClassify="type"
    ></group>
    <!-- 远程抄表分组 end -->

    <!-- 加油站通道 start -->
    <Channel
      v-if="channelModalVisible"
      :visible.sync="channelModalVisible"
      :activeDevice="activeData"
      :deviceClassify="type"
    ></Channel>
    <!-- 加油站通道 end -->
    <!-- 烟感绑定监控 start -->
    <Monitor
      v-if="monitorModalVisible"
      :visible.sync="monitorModalVisible"
      :activeDevice="activeData"
      :business="activeUnit"
      :deviceClassify="type"
    ></Monitor>
    <!-- 烟感绑定监控 end -->
    <!-- 开关列表 -->
    <SwitchList
      v-if="switchModalVisible"
      :visible.sync="switchModalVisible"
      :activeDevice="activeData"
      :business="activeUnit"
      :deviceClassify="type"
    ></SwitchList>

    <!-- 远程控制 start -->
    <el-dialog
      class="remote-modal"
      v-if="remoteControlModalVisible"
      title="远程控制"
      :visible.sync="remoteControlModalVisible"
      width="300px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <p>当前状态：{{ activeData.openingState == 1 ? "开" : "关" }}</p>
      <div class="flex-1 mt-10" v-if="activeData.openingState == 1">
        <el-button class="full" type="red" @click="setRemoteControl"
          >关闭</el-button
        >
      </div>
      <div class="flex-1 mt-10" v-else>
        <el-button class="full" type="primary" @click="setRemoteControl"
          >打开</el-button
        >
      </div>
    </el-dialog>
    <!-- 远程控制 end -->
    <!-- 导入弹窗 start -->
    <importFile
      v-if="importModalVisible"
      :visible.sync="importModalVisible"
      :business="activeUnit"
      :deviceClassify="type"
      @success="importSuccess"
    ></importFile>
    <!-- 导入弹窗 end -->
    <!-- 子设备列表 start -->
    <el-dialog
      class="childDeviceVisible"
      v-if="childDeviceVisible"
      title="子设备列表"
      :visible.sync="childDeviceVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1500px"
    >
      <child-device-list :activeUnit="activeUnit"></child-device-list>
    </el-dialog>
    <!-- 子设备列表 end -->
    <!-- 亲情电话列表 start -->
    <el-dialog
      v-if="numberTypeVisible"
      :title="numberTypeTitle"
      :visible.sync="numberTypeVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
    >
      <phoneList
        :phonelistType="phonelistType"
        :phonelistNumber="phonelistNumber"
      ></phoneList>
    </el-dialog>
    <!-- 视频流量 star -->
    <el-dialog
      class="flowRate"
      v-if="flowRateVisible"
      title="视频流量 (单位：G)"
      :visible.sync="flowRateVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="450px"
    >
      <videoTraffic
        :number="activeNumber"
        @success="flowRateSuccess"
      ></videoTraffic>
    </el-dialog>
    <!-- 视频流量 end -->
    <!-- 二维码 star -->
    <!-- <el-dialog
      v-if="code"
      title="二维码"
      :visible.sync="code"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="450px"
      class="qrCodevisible"
    >
      <div id="qrCode" class="qrCode" ref="courseInfo">
        <vue-qr ref="qrCode" :text="activeData.number" width="200" height="200">
        </vue-qr>
      </div>
      <div>
        <el-button type="primary" @click="save" size="small"
          >保存到本地</el-button
        >
        <el-button type="primary" v-print="'#qrCode'" size="small">打印</el-button>
      </div>
    </el-dialog> -->
    <!-- 二维码 end -->
  </div>
</template>
<script>
import { mapState } from "vuex";
import New from "@/components/equipment/New.vue";
import MonitorNew from "@/components/equipment/MonitorNew.vue";
import Threshold from "@/components/equipment/Threshold.vue";
import Notice from "@/components/equipment/Notice.vue";
import Evidence from "@/components/equipment/Evidence.vue";
import Group from "@/components/equipment/Group.vue";
import Channel from "@/components/equipment/Channel.vue";
import Monitor from "@/components/equipment/Monitor.vue";
import SwitchList from "@/components/switch/list.vue";
import UnitList from "@/components/equipment/UnitList.vue";
import importFile from "@/components/equipment/Import.vue";
import ChildDeviceList from "@/components/equipment/childDeviceList.vue";
import phoneList from "@/components/equipment/phoneList.vue";
import videoTraffic from "@/components/equipment/videoTraffic.vue";
// import VueQr from "vue-qr";
// import html2canvas from "html2canvas";

export default {
  name: "Equipment",
  components: {
    New,
    MonitorNew,
    Threshold,
    Notice,
    Evidence,
    Group,
    Channel,
    Monitor,
    SwitchList,
    UnitList,
    importFile,
    ChildDeviceList, //子设备列表组件
    phoneList,
    videoTraffic,
    // VueQr,
  },
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      // code: false,
      type: this.$route.query.type || "1",
      unitData: [],
      unitKeyword: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
      activeUnitId: "",
      activeUnit: {},
      defaultExpandedKeys: ["0"],
      navList: [
        {
          icon: "icon-pool",
          type: "pool",
          name: "消防用水监测系统",
        },
        {
          icon: "icon-fire",
          type: "fire",
          name: "电气火灾监测系统",
        },
        {
          icon: "icon-smoke",
          type: "smoke",
          name: "独立烟感系统",
        },
        {
          icon: "icon-gas",
          type: "gas",
          name: "可燃气体报警系统",
        },
        // {
        // 	icon: 'icon-auto',
        // 	type:'auto',
        // 	name: '火灾自动联网报警系统'
        // },
        {
          icon: "icon-monitor",
          type: "monitor",
          name: "消防可视化监测系统",
        },
        {
          icon: "icon-fire-control",
          type: "monitor",
          name: "消防可视化监测系统",
        },
      ],
      filterForm: {},
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      loading: false,
      dataList: [],
      newModalTitle: "添加设备",
      newModalVisible: false,
      adding: false,
      activeData: null,
      thresholdModalVisible: false,
      activeNumber: "",
      saving: false,
      noticeModalVisible: false,
      evidenceVisible: false,
      issueModalVisible: false,
      groupModalVisible: false,
      channelModalVisible: false,
      monitorModalVisible: false,
      switchModalVisible: false,
      remoteControlModalVisible: false,
      importModalVisible: false,
      noticeorgId: "",
      noticeId: "",
      childDeviceVisible: false, //子设备列表
      childnewModalVisible: false,
      numberTypeVisible: false,
      numberTypeTitle: "",
      phonelistNumber: "",
      phonelistType: "",
      flowRateVisible: false,
      // qrCodeUrl: "",
    };
  },
  computed: {
    ...mapState(["siteInfos"]),
    mainH() {
      return this.winH - 180;
    },
    hasUnit() {
      return this.siteInfos.userType != 1 || this.activeUnit;
    },
    accessControl() {
      return this.hasPermission("017008") || this.hasPermission("017001");
    },
    isFlowRate() {
      return (
        this.type == "6" || (Number(this.type) <= 16 && Number(this.type) >= 11)
      );
    },
  },
  watch: {
    $route(to, from) {
      this.type = to.query.type;
      this.getData(1);
    },
    unitKeyword(val) {
      // this.$refs.unitTree.filter(val)
    },
    childDeviceVisible(val) {
      if (!val) {
        this.childnewModalVisible != this.childnewModalVisible;
      }
    },
  },
  methods: {
    // //保存二维码
    // save() {
    //   html2canvas(this.$refs.courseInfo).then((canvas) => {
    //     let link = document.createElement("a");
    //     link.href = canvas.toDataURL();
    //     link.setAttribute("download", "下载.png");
    //     link.style.display = "none";
    //     document.body.appendChild(link);
    //     link.click();
    //   });
    // },
    // getCode(item) {
    //   this.code = true;
    //   this.activeData = item;
    // },
    remoteControlAction(item) {
      this.activeData = item;
      this.remoteControlModalVisible = true;
    },
    setRemoteControl() {
      let state = this.activeData.openingState == 1 ? 2 : 1;
      this.$post("/fireFightingIOT/device/createCommand", {
        number: this.activeData.number,
        state,
      }).then(
        (res) => {
          this.remoteControlModalVisible = false;
          this.$message.success("操作成功");
          this.getData(this.currentPage);
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    showSwitch(item) {
      this.activeData = item;
      this.switchModalVisible = true;
    },
    bindMonitorAction(item) {
      if (!this.hasUnit) {
        this.$message.error("请选择企业");
        return;
      }
      this.activeData = item;
      this.monitorModalVisible = true;
    },
    setChannel(item) {
      this.activeData = item;
      this.channelModalVisible = true;
    },
    showGroup() {
      this.groupModalVisible = true;
    },
    openIssueAction(item) {
      this.activeData = item;
      this.issueModalVisible = true;
    },
    openIssue() {
      let type = this.activeData.openingState == 1 ? 2 : 1;
      this.$post("/fireFightingIOT/device/openIssued", {
        number: this.activeData.number,
        type: type,
      }).then(
        (res) => {
          this.issueModalVisible = false;
          this.$message.success("操作成功");
          this.getData(this.currentPage);
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    evidenceAction(item) {
      this.activeNumber = item.number;
      this.evidenceVisible = true;
    },
    noticeAction(item) {
      this.activeNumber = item.number;
      this.noticeModalVisible = true;
      this.noticeorgId = item.orgId;
      this.noticeId = item.id;
    },
    getData(page) {
      this.loading = true;
      let businessId = "";
      if (this.siteInfos.userType == 1) {
        businessId = !this.activeUnit ? null : this.activeUnit.id;
      } else {
        businessId = this.siteInfos.homeId;
      }
      let params = Object.assign(
        {
          page: page,
          limit: this.pageSize,
          /*businessName: this.activeUnit.name ==  '企业列表' ? null : this.activeUnit.name,*/
          businessId,
          deviceClassify: this.type,
          isChildren: 2,
        },
        this.filterForm
      );

      this.$get("/fireFightingIOT/device/deviceListPage", params).then(
        (res) => {
          this.loading = false;
          let data = res.data;
          if (data) {
            this.currentPage = page;
            this.total = data.totalSize;
            this.dataList = data.Items;
            // this.$nextTick(() => {
            //   setTimeout(() => {
            //     this.getButtonCont();
            //   }, 100);
            // });
          }
        },
        (err) => {
          this.loading = false;
          this.currentPage = page;
          this.total = 0;
          this.dataList = [];
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    getUnit() {
      this.$get("/business/business/businessList").then(
        (res) => {
          let unitList = res.data;
          this.activeUnit = unitList[0] || {};
          this.activeUnitId = this.activeUnit.id;
          this.unitData = [
            {
              id: "0",
              name: "企业列表",
              businessName: null,
              children: unitList,
            },
          ];
          this.getData(1);
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    filterUnitNode(value, data) {
      if (!value || !data.name) return true;
      return data.name.indexOf(value) !== -1;
    },
    searchUnit() {
      this.$refs.unitTree.filter(this.unitKeyword);
    },
    onUnitSelect(data) {
      if (data) {
        this.activeUnitId = data.id;
        this.activeUnit = data;
      } else {
        this.activeUnitId = "";
        this.activeUnit = null;
      }
      this.getData(1);
    },
    handleUnitClick(data, node) {
      // if(data.id==0) return
      this.activeUnitId = data.id;
      this.activeUnit = data;
      this.getData(1);
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    searchAction() {
      this.getData(1);
    },
    handleCurrentChange(page) {
      this.getData(page);
    },
    getDataById(id, cbk) {
      this.$get("/fireFightingIOT/device/detail", {
        id: id,
        deviceClassify: this.type,
      }).then(
        (res) => {
          let thisData = res.data;
          cbk && cbk(thisData);
        },
        (err) => {
          //
        }
      );
    },
    newAction() {
      if (this.siteInfos.userType == 1 && !this.activeUnitId) {
        this.$message.error("请选择企业");
        return;
      }
      this.activeData = null;
      this.newModalTitle = "添加设备";
      this.newModalVisible = true;
    },
    editAction(item) {
      if (!this.hasUnit) {
        this.$message.error("请选择企业");
        return;
      }
      this.getDataById(item.id, (data) => {
        this.activeData = data;
        this.newModalTitle = "编辑设备";
        this.newModalVisible = true;
      });
    },
    submitAction() {
      this.$refs.newData.submitAction();
    },
    // 新增/编辑成功
    submitSuccessAction(data) {
      this.adding = false;
      this.newModalVisible = false;
      this.getData(this.currentPage);
    },
    submitFailAction() {
      this.adding = false;
    },
    importAction() {
      this.importModalVisible = true;
    },
    importSuccess() {
      this.getData(this.currentPage);
    },
    exportAction() {
      let businessName = this.activeUnit.name
        ? this.activeUnit.name == "企业列表"
          ? ""
          : this.activeUnit.name
        : "";
      let deviceClassify = this.type;
      let position = this.filterForm.position ? this.filterForm.position : "";
      let number = this.filterForm.number ? this.filterForm.number : "";
      let url = `${this.config.baseApi}/uploadFile/getDeviceTemplte?accountname=${this.siteInfos.accountname}&businessName=${businessName}&deviceClassify=${deviceClassify}&position=${position}&number=${number}`;
      if (deviceClassify == 1 || deviceClassify == 2 || deviceClassify == 3) {
        this.$get("/uploadFile/getDeviceExport", {
          accountname: this.siteInfos.accountname,
          businessName,
          deviceClassify,
          position,
          number,
        }).then((res) => {
          // window.open(res.data.filePath);
          window.location.href = res.data.filePath;
        });
        return;
      }
      window.open(url);
      // window.location = this.config.baseApi + '/fireFightingIOT/device/getDeviceTemplte'
      // this.$get('/uploadFile/getDeviceTemplte').then(res=>{
      // 	console.log(res)
      // },err => {
      // 	console.log(err)
      // 	window.open(this.config.baseApi + '/uploadFile/downloadExcel')
      // })
    },
    downloadAction() {
      window.open(
        this.config.baseApi +
          "/uploadFile/getTemplte?accountname=" +
          this.siteInfos.accountname
      );
    },
    deleteAction(item) {
      this.showConfirm("确定删除该设备吗？", () => {
        this.deleting = true;
        this.$post("/fireFightingIOT/device/typeDelete", {
          id: item.id,
          deviceClassify: item.deviceClassify,
        }).then(
          (res) => {
            this.deleting = false;
            this.$message.success("删除成功");
            // this.dataList.splice(index,1)
            this.getData(this.currentPage);
          },
          (err) => {
            this.deleting = false;
            this.$message.error(err.msg);
          }
        );
      });
    },
    thresholdAction(item) {
      this.activeNumber = item.number;
      this.thresholdModalVisible = true;
    },
    submitThreshold() {
      this.$refs.threshold.submitAction();
    },
    submitThresholdSuccess() {
      this.saving = false;
      this.thresholdModalVisible = false;
    },
    showChildDevice(item) {
      //子设备列表
      this.childDeviceVisible = true;
      this.activeUnit.number = item.number;
    },
    numberType(val, type) {
      //号码
      this.numberTypeTitle = type == 1 ? "亲情号码" : "SOS号码";
      this.numberTypeVisible = true;
      this.phonelistNumber = val.number;
      this.phonelistType = type;
    },
    flowRate(item) {
      if (!this.hasUnit) {
        this.$message.error("请选择企业");
        return;
      }
      this.activeNumber = item.number;
      this.flowRateVisible = true;
    },
    flowRateSuccess() {
      this.flowRateVisible = false;
      this.getData(this.currentPage);
    },
    getButtonCont() {
      this.$nextTick(() => {
        const buttonCountList = [];
        const rows = this.$refs.tableRef.$el.querySelectorAll(".el-table__row");
        rows.forEach((row, index) => {
          const buttons = row.querySelectorAll(".el-dropdown-menu__item");
          const buttonCount = buttons.length;
          buttonCountList.push(buttonCount);
        });
        this.dataList.forEach((obj, index) => {
          this.$set(obj, "buttonCount", buttonCountList[index]);
        });
      });
    },
  },
  created() {
    this.getTypeList((list) => {
      let temp = list.filter((item) => {
        return item;
      });
      this.navList = temp.map((item) => {
        return {
          icon: item.icon,
          type: item.id,
          name: item.name,
        };
      });
    });
    // this.getUnit()
  },
  activated() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.flowRate {
  /deep/.el-dialog__body {
    height: 13vh !important;
  }
}
.qrCode {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}
/deep/.qrCodevisible {
  .el-dialog__body {
    display: flex;
    justify-content: center !important;
    flex-direction: column;
    align-items: center;
  }
}
</style>
